<template>
    
   
    <div id ="upredground">
        <img id = "img"   src="./img/up.png" >

    </div>
    
    <!--刷新背景-->
    <!--
    <div id ="refresh">
        <img id = "refresh_button"   src="./img/refresh.png" >
    </div>
    -->
    <!--搜索框 -->
    <div id = "search">
    <form  target="_blank" method="get" action="https://www.baidu.com/s">
        <input type="text" placeholder="请输入搜索词" name="word" class="text" autocomplete = "off" />
		<input type="submit" value="搜索" class="search">
    </form>
    </div>
    <!--标签页-->
    <div id = tag-box>
        <!--标签页-->
        <div id="tag">
            <a href="http://172.16.10.105" target="blank"><img src="./img/logo4.png" alt="私有云盘" title="私域网盘"></a>
        </div>
        <!--标签页-->
        <div id="tag">
            <a href="http://172.16.10.105:8096" target="blank"><img src="./img/Jellyfin2.png" alt="私域视频" title="私域视频"></a>
        </div>
        <!--标签页-->
        <div id="tag">
            <a href="https://www.gitee.com/" target="blank"><img src="./img/gitee.jpg" alt="Gitee" title="Gitee"></a>
        </div>
        <!--标签页-->
        <div id="tag">
            <a href="https://www.bilibili.com/" target="blank"><img src="./img/bilibili.jpg" alt="bilibili干杯！！！" title="bilibili干杯！！！"></a>
        </div>
        <!--标签页-->
        <div id="tag">
            <a href="https://b.jd.com/" target="blank"><img src="./img/JD.jpg"  alt="京东商城" title="京东商城"></a>
        </div>
        <!--
        <div id="tag">
            <a href="https://www.pkuncii.com/"><img src="./img/company80.png" ></a>
        </div>
        <div id="tag">
            <a href="https://www.baidu.com/"><img src="https://api.iowen.cn/favicon/www.baidu.cn.png" ></a>
        </div>
              <div id="tag">
            <a href="https://www.baidu.com/"><img src="https://api.iowen.cn/favicon/www.baidu.cn.png" ></a>
        </div>
        -->
    </div>


     <!--网页尾部-->
     <div id ="downredground">
        
      <!-- <img id = "img"   src="./img/up.png" >-->
    </div>
</template>


<script>
import { h } from 'vue';


export default{
    data() {
        return {
            msg: "hello word"
        };
    },
    components: { h }
}

</script>
<style>
/*网页头*/
#upredground{
    position: absolute;
    background-color: #9e1725;
    width:100%;
    height: 65px;
    top:0px;
    left:0px

}
#refresh_button{
    position: absolute;
    width: 60px;
    height: 60px;
    top:100%;
    transform: translate(0px,-125px);
}
    
/*搜索框*/
#search{
    position: absolute;
    top:35%;
    left:50%;
    transform: translate(-50%,-50%);
    
}
.text{
    width:350px;
    height: 50px;
    margin-right: 10px;
    font-size: 14px;
    border-radius: 20px 20px 20px 20px;
    border: none; 
    text-align: center
}
.search{
    height: 52px;
    width: 70px;   
    font-size: 14px;
    border-radius: 20px 20px 20px 20px;
    border: none; 
    
}
/*导航栏*/
#tag-box{
    position: absolute;
    top:65%;
    left:50%;
    background-color: #1d8ce709;
    transform: translate(-50%,-10%);
    width: 1050px;
    height:220px;
    backdrop-filter:blur(5px);
}
#tag{
    position:relative;
    height:100px;
    display: inline-block;
    border: 5px;
    
    transform: translate(30px,55px);
}
div #tag img{
    width:100px;
    height:100px;
    margin: 0px 50px 50px 50px;
    
}
/*尾栏*/
#downredground{
    position: absolute;
    top:100%;
    left: 0px;
    width:100%;
    height:70px;
    transform: translate(0,-70px);
    background-color:#9e1725;
;
}
body{
  background-image:url(./src/components/img/background/bc3.jpg);
  background-size: cover;
  height: 100%;
  width: 100%;
}

</style>
